<template>
  <div>
    <div id="background1">
      <div id="contain">
        <h1>注册</h1>
        <div class="form">
          <label>用户名：</label><input type="text" v-model.trim="name" placeholder="请输入用户名"><br/>
        </div>
        <div class="form">
          <label>密码：</label><input type="password"
                                     v-model.trim="password"
                                     placeholder="请输入密码"
                                     autocomplete="off"/><br/>
        </div>
        <div class="form">
          <label>邮箱：</label><input type="email" v-model.trim="mail" placeholder="请输入邮箱"><br/>
        </div>
        <div class="form">
          <label>手机号：</label><input type="tel" v-model.trim="tel" placeholder="请输入手机号"><br/>
        </div>
        <button @click.prevent="handlefinish">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SeismRegister',
  props: {
    msg: String
  },
  data(){
    return{
      name: "",
      password: "",
      mail: "",
      tel: ""
    };
  },methods:{
    open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    //点击完成按钮触发handlefinish -- 注册
    handlefinish() {
      // if(sessionStorage['name'] === this.name) {
      //   this.open2("用户存在");//如果用户名已存在则无法注册
      // } else
      if(this.name === '') {
        this.open4("用户名不能为空");
      } else if(this.tel === '') {
        this.open4("号码格式错误!");
      } else{//将新用户信息存储到localStorage
        this.$axios.post('/api/users/register', {
          "userName": this.name,
          "userPws": this.password,
          "userEmail": this.mail,
          "userPhone": this.tel
        }).then(res =>{
          if(res.data.code === 20011) {
            sessionStorage.setItem('s', "false");
            this.open1("注册成功"); // 注册成功弹窗
            this.$router.replace('/login');//完成注册后跳转至登录页面
          }else {
            this.open2("用户名已存在");
          }
        }).catch(error =>{
          console.log(error);
          this.open4("系统出错了");
        })
      }
    }
  }
}
</script>

<style scoped>
@import "../assets/css/SeismRegister.css";
</style>